<template>
    <div>
        <el-dialog
            :title="info.isAdd ? '商品添加' : '商品编辑'"
            :visible.sync="info.isshow"
            @closed="closed"
        >
            <div>form:{{ form }}</div>
            <el-form :model="form">
                <el-form-item label="上级分类" :label-width="formLabelWidth">
                    <el-select v-model="form.pid" placeholder="请选择">
                        <el-option :value="0" label="顶级分类"></el-option>
                        <!-- 遍历list -->
                        <el-option
                            v-for="item in list"
                            :key="item.id"
                            :label="item.catename"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="form.catename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片" :label-width="formLabelWidth">
                    <!-- 上传文件 -->
                    <div class="my-upload">
                        <h3 class="plus">+</h3>
                        <input v-if="info.isshow" class="ipt" type="file" @change="changeFile" />
                        <img v-if="imgUrl" :src="imgUrl" alt />
                    </div>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" v-if="info.isAdd" @click="add">添加</el-button>
                <el-button type="primary" v-else @click="edit">修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { reqcateadd, reqcateinfo, reqcateedit } from "../../../http/api"
import { errorAlert, successAlert } from "../../../utils/alert"
import path from "path";

export default {
    props: ["info"],
    data() {
        return {
            form: {
                pid: "",
                catename: "",
                img: null,
                status: 1,
            },
            formLabelWidth: "120px",
            imgUrl: "",
        }
    },
    computed: {
        ...mapGetters({
            list: "cate/list",
        }),
    },
    mounted() {

    },
    methods: {
        ...mapActions({
            reqList: "cate/reqList"
        }),

        checkDate() {
            return new Promise((resolve, rejeck) => {
                if (this.form.pid === "") {
                    errorAlert("上级分类不能为空")
                    return;
                }
                if (this.form.catename === "") {
                    errorAlert("分类名称不能为空")
                    return
                }
                if (this.form.img === null) {
                    errorAlert("请上传图片")
                    return
                }
                resolve();
            })
        },

        //选了文件
        changeFile(e) {
            let file = e.target.files[0]
            //判断它的后缀名
            let imgArr = [".jpg", ".jpeg", ".png", ".gif"]
            let extname = path.extname(file.name)
            if (!imgArr.includes(extname)) {
                errorAlert("请上传正确的图片")
                return;
            }
            //判断大小
            if (file.size > 2 * 1024 * 1024) {
                errorAlert("最大支持2M")
                return;
            }
            //根据文件生成一个地址
            this.imgUrl = URL.createObjectURL(file)
            //将文件赋值给form.img
            this.form.img = file
        },
        //清空表单的数据
        empty() {
            this.form = {
                pid: "",
                catename: "",
                img: null,
                status: 1,
            }
        },
        //点了添加
        add() {
            //添加验证先
            this.checkDate().then(() => {
                reqcateadd(this.form).then(res => {
                    console.log(res);
                    if (res.data.code == 200) {
                        //弹窗成功
                        successAlert(res.data.msg);
                        //调用empty清空表单内容
                        this.empty();
                        //关闭弹框
                        this.imgUrl = ''
                        this.info.isshow = false;
                        //刷新列表
                        this.reqList()
                    }
                })
            })
        },
        //点了取消
        cancel() {
            this.info.isshow = false
        },
        //编辑渲染页面
        getOne(id) {
            console.log(id);
            reqcateinfo({ id: id }).then(res => {
                if (res.data.code == 200) {
                    //赋值给form
                    this.form = res.data.list
                    this.imgUrl = this.$pre + this.form.img
                    this.form.id = id
                }
            })
        },
        //修改
        edit() {
            this.checkDate().then(() => {
                reqcateedit(this.form).then(res => {
                    if (res.data.code == 200) {
                        //成功弹窗
                        successAlert(res.data.msg);
                        //清除数据表单
                        this.empty();
                        //关闭窗口
                        this.info.isshow = false
                        //刷新页面
                        this.reqList()
                        //清空imgUrl
                        this.imgUrl = ""
                    }
                })
            })
        },
        //弹框关闭
        closed() {
            if (this.info.isAdd == false) {
                this.empty()
                //清空imgUrl
                this.imgUrl = ""
            }
        }
    },
};
</script>
<style scoped lang="less">
@import "../../../less/index.less";
.my-upload {
    width: 100px;
    height: 100px;
    border: 1px dotted @primary;
    border-radius: 3%;
    position: relative;
    .plus {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 100px;
    }
    .ipt {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        opacity: 0;
        z-index: 10;
        cursor: pointer;
    }
    img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
    }
}
</style>